<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>高岛易断占卜系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'SimSun', serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: #f4f4f4;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .title {
            text-align: center;
            font-size: 2.5em;
            color: #ffd700;
            margin-bottom: 10px;
            text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
        }

        .subtitle {
            text-align: center;
            font-size: 1.2em;
            color: #cccccc;
            margin-bottom: 30px;
            font-style: italic;
        }

        .main-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-top: 30px;
        }

        .process-panel {
            background: rgba(255, 255, 255, 0.08);
            padding: 25px;
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .result-panel {
            background: rgba(255, 255, 255, 0.08);
            padding: 25px;
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .step {
            margin-bottom: 20px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            border-left: 4px solid #ffd700;
        }

        .step-title {
            font-size: 1.1em;
            color: #ffd700;
            margin-bottom: 8px;
            font-weight: bold;
        }

        .step-desc {
            color: #cccccc;
            line-height: 1.6;
            font-size: 0.9em;
        }

        .input-group {
            margin-bottom: 20px;
        }

        .input-group label {
            display: block;
            margin-bottom: 8px;
            color: #ffd700;
            font-weight: bold;
        }

        .input-group input,
        .input-group textarea {
            width: 100%;
            padding: 12px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            color: #f4f4f4;
            font-size: 16px; /* 防止iOS Safari缩放 */
            -webkit-appearance: none;
            -webkit-tap-highlight-color: transparent;
        }

        .input-group textarea {
            resize: vertical;
            min-height: 80px;
        }

        .gender-selection {
            display: flex;
            gap: 15px;
            margin-top: 8px;
        }

        .gender-option {
            display: flex;
            align-items: center;
            gap: 5px;
            color: #cccccc;
        }

        .gender-option input[type="radio"] {
            width: auto;
            margin-right: 8px;
            cursor: pointer;
            transform: scale(1.0); /* 调整为正常大小 */
            accent-color: #ffd700;
            opacity: 1;
            position: relative;
        }
        
        .gender-option input[type="radio"]:checked {
            background-color: #ffd700;
            border-color: #ffd700;
        }

        .gender-option label {
            cursor: pointer;
            user-select: none;
        }

        .divination-btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
            color: #1a1a2e;
            border: none;
            border-radius: 10px;
            font-size: 1.2em;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .divination-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(255, 215, 0, 0.3);
        }

        .divination-btn:active {
            transform: translateY(0);
        }

        .divination-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .screenshot-btn {
            padding: 12px 24px;
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1em;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
        }

        .screenshot-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
        }

        .screenshot-btn:active {
            transform: translateY(0);
        }

        .hexagram-display {
            text-align: center;
            margin: 20px 0;
            padding: 20px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
        }

        .hexagram {
            font-size: 3em;
            margin: 10px 0;
            font-family: serif;
        }

        .hexagram-name {
            font-size: 1.5em;
            color: #ffd700;
            margin: 10px 0;
        }

        .hexagram-lines {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 15px 0;
            gap: 3px;
        }

        .line {
            width: 120px;
            height: 8px;
            background: #ffd700;
            margin: 2px 0;
            border-radius: 2px;
            position: relative;
        }

        .line.broken {
            background: transparent;
        }

        .line.broken::before,
        .line.broken::after {
            content: '';
            position: absolute;
            top: 0;
            width: 45px;
            height: 8px;
            background: #ffd700;
            border-radius: 2px;
        }

        .line.broken::before {
            left: 0;
        }

        .line.broken::after {
            right: 0;
        }

        .line.changing {
            animation: pulse 1s infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }
        }

        .interpretation {
            margin-top: 20px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            border: 1px solid rgba(255, 215, 0, 0.3);
        }

        .interpretation-title {
            font-size: 1.3em;
            color: #ffd700;
            margin-bottom: 15px;
            text-align: center;
        }

        .interpretation-section {
            margin-bottom: 15px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 8px;
        }

        .interpretation-section h4 {
            color: #ffd700;
            margin-bottom: 8px;
            font-size: 1em;
        }

        .interpretation-section p {
            color: #cccccc;
            line-height: 1.6;
            font-size: 0.9em;
        }

        .weight {
            font-size: 0.8em;
            color: #999;
            font-style: italic;
        }

        .progress-indicator {
            margin: 20px 0;
            text-align: center;
        }

        .progress-dot {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            margin: 0 5px;
            transition: all 0.3s ease;
        }

        .progress-dot.active {
            background: #ffd700;
            transform: scale(1.2);
        }

        .meditation-timer {
            text-align: center;
            margin: 20px 0;
            padding: 15px;
            background: rgba(255, 215, 0, 0.1);
            border-radius: 10px;
            border: 1px solid rgba(255, 215, 0, 0.3);
        }

        .timer-display {
            font-size: 2em;
            color: #ffd700;
            font-family: monospace;
        }

        .timer-desc {
            color: #cccccc;
            margin-top: 5px;
        }

        /* 冥想动画样式 */
        .meditation-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(5px);
        }

        .meditation-content {
            text-align: center;
            color: #fff;
            padding: 40px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            width: 400px;
            max-width: 90vw;
            box-sizing: border-box;
        }

        .breathing-circle {
            width: 120px;
            height: 120px;
            border: 3px solid #ffd700;
            border-radius: 50%;
            margin: 0 auto 30px;
            position: relative;
            animation: breathe 4s ease-in-out infinite, glow 6s ease-in-out infinite;
            box-shadow: 
                0 0 30px rgba(255, 215, 0, 0.5),
                0 0 60px rgba(255, 215, 0, 0.3),
                inset 0 0 20px rgba(255, 215, 0, 0.2);
            background-image: url('qidao.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .breathing-circle::before {
            content: '';
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            border: 2px solid rgba(255, 215, 0, 0.3);
            border-radius: 50%;
            animation: pulse 3s ease-in-out infinite;
        }

        .breathing-circle::after {
            content: '';
            position: absolute;
            top: -20px;
            left: -20px;
            right: -20px;
            bottom: -20px;
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: 50%;
            animation: pulse 4s ease-in-out infinite reverse;
        }

        @keyframes breathe {
            0%, 100% {
                transform: scale(1);
                opacity: 0.7;
                border-color: #ffd700;
            }
            25% {
                transform: scale(1.05);
                opacity: 0.85;
                border-color: #ffed4e;
            }
            50% {
                transform: scale(1.2);
                opacity: 1;
                border-color: #fff;
            }
            75% {
                transform: scale(1.05);
                opacity: 0.85;
                border-color: #ffed4e;
            }
        }

        @keyframes glow {
            0%, 100% {
                box-shadow: 
                    0 0 30px rgba(255, 215, 0, 0.5),
                    0 0 60px rgba(255, 215, 0, 0.3),
                    inset 0 0 20px rgba(255, 215, 0, 0.2);
            }
            50% {
                box-shadow: 
                    0 0 50px rgba(255, 215, 0, 0.8),
                    0 0 100px rgba(255, 215, 0, 0.5),
                    0 0 150px rgba(255, 215, 0, 0.3),
                    inset 0 0 30px rgba(255, 215, 0, 0.4);
            }
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
                opacity: 0.3;
            }
            50% {
                transform: scale(1.3);
                opacity: 0.1;
            }
        }

        .meditation-text h3 {
            font-size: 24px;
            margin-bottom: 15px;
            color: #ffd700;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
        }

        .meditation-text p {
            font-size: 16px;
            margin: 8px 0;
            opacity: 0.9;
        }

        .dots-animation {
            margin-top: 30px;
        }

        .dots-animation span {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #ffd700;
            margin: 0 4px;
            animation: dotPulse 1.5s ease-in-out infinite;
        }

        .dots-animation span:nth-child(1) {
            animation-delay: 0s;
        }

        .dots-animation span:nth-child(2) {
            animation-delay: 0.3s;
        }

        .dots-animation span:nth-child(3) {
            animation-delay: 0.6s;
        }

        @keyframes dotPulse {

            0%,
            100% {
                opacity: 0.3;
                transform: scale(1);
            }

            50% {
                opacity: 1;
                transform: scale(1.3);
            }
        }

        .countdown-timer {
            font-size: 48px;
            font-weight: bold;
            color: #ffd700;
            text-align: center;
            margin: 20px 0;
            text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
            animation: countdownPulse 1s ease-in-out infinite;
        }

        @keyframes countdownPulse {

            0%,
            100% {
                transform: scale(1);
                opacity: 0.8;
            }

            50% {
                transform: scale(1.1);
                opacity: 1;
            }
        }

        .overall-timer {
            text-align: center;
            margin: 20px 0;
            padding: 15px;
            background: rgba(255, 215, 0, 0.1);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 10px;
        }

        .timer-label {
            color: #ffd700;
            font-size: 14px;
            margin-bottom: 8px;
            font-weight: bold;
        }

        .timer-display {
            color: #fff;
            font-size: 24px;
            font-weight: bold;
            font-family: 'Courier New', monospace;
        }

        /* 移动端响应式样式 */
        @media (max-width: 768px) {
            body {
                padding: 10px;
                font-size: 14px;
            }

            .container {
                padding: 20px;
                border-radius: 15px;
            }

            .title {
                font-size: 1.8em;
                margin-bottom: 8px;
            }

            .subtitle {
                font-size: 1em;
                margin-bottom: 20px;
            }

            .main-content {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .process-panel,
            .result-panel {
                padding: 20px;
                border-radius: 12px;
            }

            .step {
                padding: 12px;
                margin-bottom: 15px;
            }

            .step-title {
                font-size: 1em;
            }

            .step-desc {
                font-size: 0.85em;
                line-height: 1.5;
            }

            .divination-scope {
                padding: 15px !important;
                margin: 15px 0 !important;
            }

            .divination-scope h3 {
                font-size: 1.1em !important;
                margin-bottom: 12px !important;
            }

            .divination-scope div[style*="grid-template-columns"] {
                grid-template-columns: 1fr !important;
                gap: 10px !important;
            }

            .divination-scope h4 {
                font-size: 0.85em !important;
            }

            .divination-scope ul {
                font-size: 0.8em !important;
            }

            .divination-scope p {
                font-size: 0.8em !important;
            }

            .input-group {
                margin-bottom: 15px;
            }

            .input-group label {
                font-size: 0.9em;
                margin-bottom: 6px;
            }

            .input-group input,
            .input-group textarea {
                padding: 10px;
                font-size: 16px; /* 防止移动端缩放 */
            }

            .input-group textarea {
                min-height: 60px;
            }

            .gender-selection {
                flex-direction: column;
                gap: 8px;
            }

            .gender-option {
                font-size: 0.9em;
            }

            .divination-btn {
                padding: 12px;
                font-size: 1em;
                border-radius: 8px;
            }

            .hexagram {
                font-size: 1.5em;
            }

            .hexagram-name {
                font-size: 1.2em;
            }

            .hexagram-lines {
                margin: 10px 0;
            }

            .line {
                width: 80px;
                height: 6px;
            }

            .line.broken::before,
            .line.broken::after {
                width: 30px;
                height: 6px;
            }

            .interpretation {
                padding: 15px;
            }

            .interpretation-title {
                font-size: 1.1em;
                margin-bottom: 12px;
            }

            .interpretation-section {
                padding: 8px;
                margin-bottom: 12px;
            }

            .interpretation-section h4 {
                font-size: 0.9em;
                margin-bottom: 6px;
            }

            .interpretation-section p {
                font-size: 0.85em;
                line-height: 1.5;
            }

            .weight {
                font-size: 0.75em;
            }

            .meditation-timer {
                padding: 12px;
                margin: 15px 0;
            }

            .timer-display {
                font-size: 1.5em;
            }

            .timer-desc {
                font-size: 0.85em;
            }

            .overall-timer {
                padding: 12px;
                margin: 15px 0;
            }

            .timer-label {
                font-size: 0.8em;
            }

            .overall-timer .timer-display {
                font-size: 1.2em;
            }

            .progress-dot {
                width: 10px;
                height: 10px;
                margin: 0 3px;
            }
        }

        /* 小屏幕手机优化 */
        @media (max-width: 480px) {
            body {
                padding: 5px;
                font-size: 13px;
            }

            .container {
                padding: 15px;
                border-radius: 12px;
            }

            .title {
                font-size: 1.6em;
                margin-bottom: 6px;
            }

            .subtitle {
                font-size: 0.9em;
                margin-bottom: 15px;
            }

            .process-panel,
            .result-panel {
                padding: 15px;
            }

            .step {
                padding: 10px;
                margin-bottom: 12px;
            }

            .step-title {
                font-size: 0.95em;
            }

            .step-desc {
                font-size: 0.8em;
            }

            .divination-scope {
                padding: 12px !important;
                margin: 12px 0 !important;
            }

            .divination-scope h3 {
                font-size: 1em !important;
                margin-bottom: 10px !important;
            }

            .divination-scope h4 {
                font-size: 0.8em !important;
            }

            .divination-scope ul {
                font-size: 0.75em !important;
                padding-left: 12px !important;
            }

            .divination-scope p {
                font-size: 0.75em !important;
            }

            .input-group {
                margin-bottom: 12px;
            }

            .input-group label {
                font-size: 0.85em;
            }

            .input-group input,
            .input-group textarea {
                padding: 8px;
                font-size: 16px; /* 防止小屏幕缩放 */
            }

            .divination-btn {
                padding: 10px;
                font-size: 0.95em;
            }

            .hexagram-name {
                font-size: 1.1em;
            }

            .line {
                width: 70px;
                height: 5px;
            }

            .line.broken::before,
            .line.broken::after {
                width: 25px;
                height: 5px;
            }

            .interpretation {
                padding: 12px;
            }

            .interpretation-title {
                font-size: 1em;
            }

            .interpretation-section h4 {
                font-size: 0.85em;
            }

            .interpretation-section p {
                font-size: 0.8em;
            }

            .progress-dot {
                width: 8px;
                height: 8px;
                margin: 0 2px;
            }
        }

        /* 冥想动画移动端优化 */
        @media (max-width: 768px) {
            .meditation-content {
                padding: 30px 20px;
                margin: 0 10px;
                width: 350px;
                max-width: 85vw;
            }

            .breathing-circle {
                width: 100px;
                height: 100px;
                margin-bottom: 25px;
            }

            .meditation-text h3 {
                font-size: 20px;
                margin-bottom: 12px;
            }

            .meditation-text p {
                font-size: 14px;
                margin: 6px 0;
            }

            .countdown-timer {
                font-size: 36px;
                margin: 15px 0;
            }

            .dots-animation {
                margin-top: 20px;
            }

            .dots-animation span {
                width: 6px;
                height: 6px;
                margin: 0 3px;
            }
        }

        @media (max-width: 480px) {
            .meditation-content {
                padding: 25px 15px;
                margin: 0 5px;
                width: 300px;
                max-width: 90vw;
            }

            .breathing-circle {
                width: 80px;
                height: 80px;
                margin-bottom: 20px;
            }

            .meditation-text h3 {
                font-size: 18px;
                margin-bottom: 10px;
            }

            .meditation-text p {
                font-size: 13px;
                margin: 5px 0;
            }

            .countdown-timer {
                font-size: 30px;
                margin: 12px 0;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <h1 class="title">高岛易断占卜系统</h1>
        <p class="subtitle">"至诚无息" · 略筮法七步流程</p>

        <!-- 卜筮范围说明 -->
        <div class="divination-scope" style="background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.3); border-radius: 12px; padding: 20px; margin: 20px 0; color: #cccccc; line-height: 1.6;">
            <h3 style="color: #ffd700; text-align: center; margin-bottom: 15px; font-size: 1.2em;">📜 卜筮范围说明</h3>
            
            <div style="margin-bottom: 15px;">
                <p style="margin-bottom: 8px; color: #e6e6e6; font-size: 0.95em;">《易经》之卜筮，本为天地人事之参照，吉凶趋避之指南。高岛易断以果决之断语见长，但其所能推演之范围，亦有分界。凡来求问者，当知其适用与不适用之别。</p>
            </div>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;">
                <div style="background: rgba(0, 255, 0, 0.1); border-radius: 8px; padding: 12px;">
                    <h4 style="color: #90EE90; margin: 0 0 8px 0; font-size: 0.9em;">✅ 适宜卜筮之事</h4>
                    <ul style="margin: 0; padding-left: 15px; font-size: 0.85em; color: #cccccc;">
                        <li>个人抉择：进退取舍、求职择业、合作签约</li>
                        <li>人际关系：感情走向、婚姻吉凶、朋友交往</li>
                        <li>财运投资：购置置业、投机买卖、进退时机</li>
                        <li>健康出行：身体安危、旅行吉凶、迁徙动静</li>
                        <li>趋势判断：大势向上向下、宜守宜动</li>
                    </ul>
                </div>
                
                <div style="background: rgba(255, 0, 0, 0.1); border-radius: 8px; padding: 12px;">
                    <h4 style="color: #FFB6C1; margin: 0 0 8px 0; font-size: 0.9em;">❌ 不宜卜筮之事</h4>
                    <ul style="margin: 0; padding-left: 15px; font-size: 0.85em; color: #cccccc;">
                        <li>精确数额：股市点位、具体金额、彩票号码</li>
                        <li>违法违禁：涉及违法之事、害人之事</li>
                        <li>强行窥探：非己相关，强卜他人隐私或命运</li>
                    </ul>
                </div>
            </div>
            
            <div style="background: rgba(255, 215, 0, 0.1); border-radius: 8px; padding: 12px; border: 1px dashed rgba(255, 215, 0, 0.3);">
                <h4 style="color: #ffd700; margin: 0 0 8px 0; font-size: 0.9em;">⚠️ 特别说明</h4>
                <p style="margin: 0; font-size: 0.85em; color: #cccccc;">股市、房市、币市等皆属<strong>群体合力</strong>与<strong>政策所系</strong>，变化极速。卜筮可占"宜否、吉凶、趋势"，但不可拘于具体点位与时日。占问者应以卦象为参考，仍须结合现实谨慎决策。易断之义，本为趋吉避凶，不可执迷，尤不可依卦而轻率冒进。</p>
            </div>
        </div>

        <div class="main-content">
            <div class="process-panel">
                <h3 style="color: #ffd700; margin-bottom: 20px; text-align: center;">占卜流程</h3>

                <div class="input-group">
                    <label>占问之事：</label>
                    <textarea id="question" placeholder="请输入您要占问的事情..."></textarea>
                </div>

                <div class="input-group">
                    <label>性别选择：</label>
                    <div class="gender-selection">
                        <div class="gender-option">
                            <input type="radio" id="male" name="gender" value="male" checked>
                            <label for="male">男（取左手堆）</label>
                        </div>
                        <div class="gender-option">
                            <input type="radio" id="female" name="gender" value="female">
                            <label for="female">女（取右手堆）</label>
                        </div>
                    </div>
                </div>

                <div class="meditation-timer" id="meditationTimer" style="display: none;">
                    <div class="timer-display" id="timerDisplay">01:00</div>
                    <div class="timer-desc">静心凝神，摒除杂念</div>
                </div>

                <button class="divination-btn" id="startBtn" onclick="startDivination()">
                    开始占卜
                </button>

                <div class="progress-indicator" id="progressIndicator" style="display: none;">
                    <div class="progress-dot" id="dot1"></div>
                    <div class="progress-dot" id="dot2"></div>
                    <div class="progress-dot" id="dot3"></div>
                    <div class="progress-dot" id="dot4"></div>
                    <div class="progress-dot" id="dot5"></div>
                    <div class="progress-dot" id="dot6"></div>
                    <div class="progress-dot" id="dot7"></div>
                </div>

                <div class="overall-timer" id="overallTimer" style="display: none;">
                    <div class="timer-label">占卜进行中</div>
                    <div class="timer-display" id="overallTimerDisplay">00:00</div>
                </div>

                <div class="step" id="currentStep" style="display: none;">
                    <div class="step-title" id="stepTitle"></div>
                    <div class="step-desc" id="stepDesc"></div>
                </div>
            </div>

            <div class="result-panel">
                <h3 style="color: #ffd700; margin-bottom: 20px; text-align: center;">卦象结果</h3>

                <div id="results" style="display: none;">
                    <div class="hexagram-display">
                        <div class="hexagram-name" id="originalName">本卦</div>
                        <div class="hexagram-lines" id="originalHexagram"></div>
                        <div style="margin: 20px 0; color: #ffd700;">变为</div>
                        <div class="hexagram-name" id="changedName">变卦</div>
                        <div class="hexagram-lines" id="changedHexagram"></div>
                    </div>

                    <div class="interpretation" id="interpretation">
                        <div class="interpretation-title">卦象解读</div>

                        <div class="interpretation-section">
                            <h4>本卦卦辞 <span class="weight">(权重30%)</span></h4>
                            <p id="originalText"></p>
                        </div>

                        <div class="interpretation-section">
                            <h4>动爻爻辞 <span class="weight">(权重51%)</span></h4>
                            <p id="changingLineText"></p>
                        </div>

                        <div class="interpretation-section">
                            <h4>变卦卦辞 <span class="weight">(权重19%)</span></h4>
                            <p id="changedText"></p>
                        </div>

                        <div class="interpretation-section"
                            style="background: transparent; border: none;">
                            <h4>综合解读</h4>
                            <p id="overallInterpretation"></p>
                        </div>
                        
                        <!-- 截图按钮 -->
                        <div class="screenshot-section" style="text-align: center; margin-top: 20px; padding: 15px;">
                            <button class="screenshot-btn" id="screenshotBtn" onclick="takeScreenshot()" style="display: none;">
                                📸 保存卦象截图
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 八卦数据
        const trigrams = {
            1: { name: '乾', symbol: '☰', binary: '111' },
            2: { name: '兑', symbol: '☱', binary: '110' },
            3: { name: '离', symbol: '☲', binary: '101' },
            4: { name: '震', symbol: '☳', binary: '100' },
            5: { name: '巽', symbol: '☴', binary: '011' },
            6: { name: '坎', symbol: '☵', binary: '010' },
            7: { name: '艮', symbol: '☶', binary: '001' },
            8: { name: '坤', symbol: '☷', binary: '000' }
        };

        // 六十四卦数据（完整版 - 按正确二进制编码排序）
        const hexagrams = {
            // 1. 乾为天 ䷀ 111111 (63)
            '111111': { name: '乾为天', meaning: '元亨利贞。天行健，君子以自强不息。' },
            // 2. 坤为地 ䷁ 000000 (0)
            '000000': { name: '坤为地', meaning: '元亨，利牝马之贞。地势坤，君子以厚德载物。' },
            // 3. 水雷屯 ䷂ 100010 (34)
            '100010': { name: '水雷屯', meaning: '元亨利贞，勿用有攸往，利建侯。云雷屯，君子以经纶。' },
            // 4. 山水蒙 ䷃ 010001 (17)
            '010001': { name: '山水蒙', meaning: '亨。匪我求童蒙，童蒙求我。山水蒙，君子以果行育德。' },
            // 5. 水天需 ䷄ 111010 (58)
            '111010': { name: '水天需', meaning: '有孚，光亨，贞吉，利涉大川。云天需，君子以饮食宴乐。' },
            // 6. 天水讼 ䷅ 010111 (23)
            '010111': { name: '天水讼', meaning: '有孚，窒惕，中吉，终凶，利见大人，不利涉大川。天水讼，君子以作事谋始。' },
            // 7. 地水师 ䷆ 010000 (16)
            '010000': { name: '地水师', meaning: '贞，丈人吉，无咎。地水师，君子以容民畜众。' },
            // 8. 水地比 ䷇ 000010 (2)
            '000010': { name: '水地比', meaning: '吉。原筮元永贞，无咎。水地比，先王以建万国，亲诸侯。' },
            // 9. 风天小畜 ䷈ 111011 (59)
            '111011': { name: '风天小畜', meaning: '亨。密云不雨，自我西郊。风天小畜，君子以懿文德。' },
            // 10. 天泽履 ䷉ 110111 (47)
            '110111': { name: '天泽履', meaning: '履虎尾，不咥人，亨。天泽履，君子以辨上下，定民志。' },
            // 11. 地天泰 ䷊ 111000 (56)
            '111000': { name: '地天泰', meaning: '小往大来，吉亨。地天泰，后以财成天地之道，辅相天地之宜。' },
            // 12. 天地否 ䷋ 000111 (7)
            '000111': { name: '天地否', meaning: '否之匪人，不利君子贞，大往小来。天地否，君子以俭德辟难，不可荣以禄。' },
            // 13. 天火同人 ䷌ 101111 (61)
            '101111': { name: '天火同人', meaning: '同人于野，亨。利涉大川，利君子贞。天火同人，君子以类族辨物。' },
            // 14. 火天大有 ䷍ 111101 (59)
            '111101': { name: '火天大有', meaning: '元亨。火天大有，君子以遏恶扬善，顺天休命。' },
            // 15. 地山谦 ䷎ 001000 (8)
            '001000': { name: '地山谦', meaning: '亨，君子有终。地山谦，君子以裒多益寡，称物平施。' },
            // 16. 雷地豫 ䷏ 000100 (4)
            '000100': { name: '雷地豫', meaning: '利建侯行师。雷地豫，先王以作乐崇德，殷荐之上帝。' },
            // 17. 泽雷随 ䷐ 100110 (38)
            '100110': { name: '泽雷随', meaning: '元亨利贞，无咎。泽雷随，君子以向晦入宴息。' },
            // 18. 山风蛊 ䷑ 011001 (25)
            '011001': { name: '山风蛊', meaning: '元亨，利涉大川。先甲三日，后甲三日。山风蛊，君子以振民育德。' },
            // 19. 地泽临 ䷒ 110000 (48)
            '110000': { name: '地泽临', meaning: '元亨利贞。至于八月有凶。地泽临，君子以教思无穷，容保民无疆。' },
            // 20. 风地观 ䷓ 000011 (3)
            '000011': { name: '风地观', meaning: '盥而不荐，有孚颙若。风地观，先王以省方，观民设教。' },
            // 21. 火雷噬嗑 ䷔ 100101 (37)
            '100101': { name: '火雷噬嗑', meaning: '亨。利用狱。火雷噬嗑，先王以明罚敕法。' },
            // 22. 山火贲 ䷕ 101001 (41)
            '101001': { name: '山火贲', meaning: '亨。小利有攸往。山火贲，君子以明庶政，无敢折狱。' },
            // 23. 山地剥 ䷖ 000001 (1)
            '000001': { name: '山地剥', meaning: '不利有攸往。山地剥，上以厚下，安宅。' },
            // 24. 地雷复 ䷗ 100000 (32)
            '100000': { name: '地雷复', meaning: '亨。出入无疾，朋来无咎。反复其道，七日来复，利有攸往。地雷复，先王以至日闭关，商旅不行。' },
            // 25. 天雷无妄 ䷘ 100111 (39)
            '100111': { name: '天雷无妄', meaning: '元亨利贞。其匪正有眚，不利有攸往。天雷无妄，先王以茂对时，育万物。' },
            // 26. 山天大畜 ䷙ 111001 (57)
            '111001': { name: '山天大畜', meaning: '利贞，不家食吉，利涉大川。山天大畜，君子以多识前言往行，以畜其德。' },
            // 27. 山雷颐 ䷚ 100001 (33)
            '100001': { name: '山雷颐', meaning: '贞吉。观颐，自求口实。山雷颐，君子以慎言语，节饮食。' },
            // 28. 泽风大过 ䷛ 011110 (30)
            '011110': { name: '泽风大过', meaning: '栋桡，利有攸往，亨。泽风大过，君子以独立不惧，遁世无闷。' },
            // 29. 坎为水 ䷜ 010010 (18)
            '010010': { name: '坎为水', meaning: '习坎，有孚，维心亨，行有尚。坎，君子以常德行，习教事。' },
            // 30. 离为火 ䷝ 101101 (45)
            '101101': { name: '离为火', meaning: '利贞，亨。畜牝牛，吉。离，君子以继明照于四方。' },
            // 31. 泽山咸 ䷞ 001110 (14)
            '001110': { name: '泽山咸', meaning: '亨，利贞，取女吉。泽山咸，君子以虚受人。' },
            // 32. 雷风恒 ䷟ 011100 (28)
            '011100': { name: '雷风恒', meaning: '亨，无咎，利贞，利有攸往。雷风恒，君子以立不易方。' },
            // 33. 天山遁 ䷠ 001111 (15)
            '001111': { name: '天山遁', meaning: '亨，小利贞。天山遁，君子以远小人，不恶而严。' },
            // 34. 雷天大壮 ䷡ 111100 (60)
            '111100': { name: '雷天大壮', meaning: '利贞。雷天大壮，君子以非礼弗履。' },
            // 35. 火地晋 ䷢ 000101 (5)
            '000101': { name: '火地晋', meaning: '康侯用锡马蕃庶，昼日三接。火地晋，君子以自昭明德。' },
            // 36. 地火明夷 ䷣ 101000 (40)
            '101000': { name: '地火明夷', meaning: '利艰贞。地火明夷，君子以莅众，用晦而明。' },
            // 37. 风火家人 ䷤ 101011 (43)
            '101011': { name: '风火家人', meaning: '利女贞。风火家人，君子以言有物，而行有恒。' },
            // 38. 火泽睽 ䷥ 110101 (53)
            '110101': { name: '火泽睽', meaning: '小事吉。火泽睽，君子以同而异。' },
            // 39. 水山蹇 ䷦ 001010 (10)
            '001010': { name: '水山蹇', meaning: '利西南，不利东北。利见大人，贞吉。水山蹇，君子以反身修德。' },
            // 40. 雷水解 ䷧ 010100 (20)
            '010100': { name: '雷水解', meaning: '利西南，无所往，其来复吉。有攸往，夙吉。雷水解，君子以赦过宥罪。' },
            // 41. 山泽损 ䷨ 110001 (49)
            '110001': { name: '山泽损', meaning: '有孚，元吉，无咎，可贞，利有攸往。曷之用，二簋可用享。山泽损，君子以惩忿窒欲。' },
            // 42. 风雷益 ䷩ 100011 (35)
            '100011': { name: '风雷益', meaning: '利有攸往，利涉大川。风雷益，君子以见善则迁，有过则改。' },
            // 43. 泽天夬 ䷪ 111110 (62)
            '111110': { name: '泽天夬', meaning: '扬于王庭，孚号，有厉，告自邑，不利即戎，利有攸往。泽天夬，君子以施禄及下，居德则忌。' },
            // 44. 天风姤 ䷫ 011111 (31)
            '011111': { name: '天风姤', meaning: '女壮，勿用取女。天风姤，后以施命诰四方。' },
            // 45. 泽地萃 ䷬ 000110 (6)
            '000110': { name: '泽地萃', meaning: '亨。王假有庙，利见大人，亨，利贞。用大牲吉，利有攸往。泽地萃，君子以除戎器，戒不虞。' },
            // 46. 地风升 ䷭ 011000 (24)
            '011000': { name: '地风升', meaning: '元亨，用见大人，勿恤，南征吉。地风升，君子以顺德，积小以高大。' },
            // 47. 泽水困 ䷮ 010110 (22)
            '010110': { name: '泽水困', meaning: '亨，贞，大人吉，无咎，有言不信。泽水困，君子以致命遂志。' },
            // 48. 水风井 ䷯ 011010 (26)
            '011010': { name: '水风井', meaning: '改邑不改井，无丧无得，往来井井。汔至，亦未繘井，羸其瓶，凶。水风井，君子以劳民劝相。' },
            // 49. 泽火革 ䷰ 101110 (46)
            '101110': { name: '泽火革', meaning: '巳日乃孚，元亨利贞，悔亡。泽火革，君子以治历明时。' },
            // 50. 火风鼎 ䷱ 011101 (29)
            '011101': { name: '火风鼎', meaning: '元吉，亨。火风鼎，君子以正位凝命。' },
            // 51. 震为雷 ䷲ 100100 (36)
            '100100': { name: '震为雷', meaning: '亨。震来虩虩，笑言哑哑。震惊百里，不丧匕鬯。震，君子以恐惧修省。' },
            // 52. 艮为山 ䷳ 001001 (9)
            '001001': { name: '艮为山', meaning: '艮其背，不获其身。行其庭，不见其人，无咎。艮，君子以思不出其位。' },
            // 53. 风山渐 ䷴ 001011 (11)
            '001011': { name: '风山渐', meaning: '女归吉，利贞。风山渐，君子以居贤德善俗。' },
            // 54. 雷泽归妹 ䷵ 110100 (52)
            '110100': { name: '雷泽归妹', meaning: '征凶，无攸利。雷泽归妹，君子以永终知敝。' },
            // 55. 雷火丰 ䷶ 101100 (44)
            '101100': { name: '雷火丰', meaning: '亨。王假之，勿忧，宜日中。雷火丰，君子以折狱致刑。' },
            // 56. 火山旅 ䷷ 001101 (13)
            '001101': { name: '火山旅', meaning: '小亨，旅贞吉。火山旅，君子以明慎用刑，而不留狱。' },
            // 57. 巽为风 ䷸ 011011 (27)
            '011011': { name: '巽为风', meaning: '小亨，利有攸往，利见大人。巽，君子以申命行事。' },
            // 58. 兑为泽 ䷹ 110110 (54)
            '110110': { name: '兑为泽', meaning: '亨，利贞。兑，君子以朋友讲习。' },
            // 59. 风水涣 ䷺ 010011 (19)
            '010011': { name: '风水涣', meaning: '亨。王假有庙，利涉大川，利贞。风水涣，先王以享于帝立庙。' },
            // 60. 水泽节 ䷻ 110010 (50)
            '110010': { name: '水泽节', meaning: '亨。苦节，不可贞。水泽节，君子以制数度，议德行。' },
            // 61. 风泽中孚 ䷼ 110011 (51)
            '110011': { name: '风泽中孚', meaning: '豚鱼吉，利涉大川，利贞。风泽中孚，君子以议狱缓死。' },
            // 62. 雷山小过 ䷽ 001100 (12)
            '001100': { name: '雷山小过', meaning: '亨，利贞，可小事，不可大事。飞鸟遗之音，不宜上，宜下，大吉。雷山小过，君子以行过乎恭，丧过乎哀，用过乎俭。' },
            // 63. 水火既济 ䷾ 101010 (42)
            '101010': { name: '水火既济', meaning: '亨，小利贞，初吉终乱。水火既济，君子以思患而豫防之。' },
            // 64. 火水未济 ䷿ 010101 (21)
            '010101': { name: '火水未济', meaning: '亨，小狐汔济，濡其尾，无攸利。火水未济，君子以慎辨物居方。' }
        };

        // 爻辞数据（完整版）
        const lineTexts = {
            1: ['潜龙勿用', '见龙在田，利见大人', '君子终日乾乾，夕惕若厉，无咎', '或跃在渊，无咎', '飞龙在天，利见大人', '亢龙有悔'],
            2: ['履霜坚冰至', '直方大，不习无不利', '含章可贞，或从王事，无成有终', '括囊，无咎无誉', '黄裳，元吉', '龙战于野，其血玄黄'],
            3: ['磐桓，利居贞，利建侯', '屯如邅如，乘马班如，匪寇婚媾', '即鹿无虞，惟入于林中，君子几不如舍，往吝', '乘马班如，求婚媾，往吉，无不利', '屯其膏，小贞吉，大贞凶', '乘马班如，泣血涟如'],
            4: ['发蒙，利用刑人，用说桎梏，以往吝', '包蒙吉，纳妇吉，子克家', '勿用娶女，见金夫，不有躬，无攸利', '困蒙，吝', '童蒙，吉', '击蒙，不利为寇，利御寇'],
            5: ['需于郊，利用恒，无咎', '需于沙，小有言，终吉', '需于泥，致寇至', '需于血，出自穴', '需于酒食，贞吉', '入于穴，有不速之客三人来，敬之终吉'],
            6: ['不永所事，小有言，终吉', '不克讼，归而逋，其邑人三百户，无眚', '食旧德，贞厉，终吉，或从王事，无成', '不克讼，复即命，渝安贞，吉', '讼元吉', '或锡之鞶带，终朝三褫之'],
            7: ['师出以律，否臧凶', '在师中，吉无咎，王三锡命', '师或舆尸，凶', '师左次，无咎', '田有禽，利执言，无咎，长子帅师，弟子舆尸，贞凶', '大君有命，开国承家，小人勿用'],
            8: ['有孚比之，无咎，有孚盈缶，终来有他，吉', '比之自内，贞吉', '比之匪人', '外比之，贞吉', '显比，王用三驱，失前禽，邑人不诫，吉', '比之无首，凶'],
            9: ['复自道，何其咎，吉', '牵复，吉', '舆说辐，夫妻反目', '有孚，血去惕出，无咎', '有孚挛如，富以其邻', '既雨既处，尚德载，妇贞厉，月几望，君子征凶'],
            10: ['素履，往无咎', '履道坦坦，幽人贞吉', '眇能视，跛能履，履虎尾，咥人，凶，武人为于大君', '履虎尾，愬愬终吉', '夬履，贞厉', '视履考祥，其旋元吉']
        };

        let currentStepIndex = 0;
        let meditationTimer;
        let results = {};

        const steps = [
            {
                title: "第一步：备器与斋心",
                desc: "准备50根同质竹签（或牙签、棉签），环境整洁安静；占卜前静心1-2分钟，摒除杂念，默念所要占问之事。"
            },
            {
                title: "第二步：立太极",
                desc: "从50根中抽出1根横置案前，象征\"太极\"，余49根待用。"
            },
            {
                title: "第三步：得上卦",
                desc: "将49根合于双手，举至额头，屏息凝气，在\"间不容发\"之际果断分成左右两堆；男取左手堆，女取右手堆，对该堆\"除八取余\"（每8根一组取出，剩余数即为上卦数，若整除则作8）。"
            },
            {
                title: "第四步：得下卦",
                desc: "把刚才49根重新合拢，重复\"分堆—除八取余\"动作，但男取右手堆，女取左手堆，所得余数为下卦数。"
            },
            {
                title: "第五步：取动爻",
                desc: "再次把49根合拢，分堆后男取左手堆、女取右手堆，对该堆\"除六取余\"（每6根一组取出，余数即为动爻位数，整除作6）。至此本卦与动爻俱定。"
            },
            {
                title: "第六步：画卦与变卦",
                desc: "按\"先上后下\"写出本卦；从下往上数至动爻，阳爻变阴、阴爻变阳，得变卦。"
            },
            {
                title: "第七步：查辞与解占",
                desc: "翻开《高岛易断》或相关典籍：本卦卦辞权重约30%，动爻爻辞权重约51%，变卦卦辞权重约19%，结合三者断吉凶，并可配合当时占问背景灵活解读。"
            }
        ];

        let overallTimer = null;

        function calculateTotalTime() {
            // 计算所有步骤的总时间（秒）- 确保不少于60秒
            let totalSeconds = 0;
            for (let i = 0; i < 7; i++) {
                if (i === 2 || i === 3 || i === 4) {
                    totalSeconds += 12; // 关键步骤12秒
                } else {
                    totalSeconds += 8; // 默认8秒
                }
            }
            return totalSeconds; // 总计68秒
        }

        let totalRemainingTime = 0;

        function startOverallCountdown(totalSeconds) {
            const overallTimerElement = document.getElementById('overallTimer');
            if (overallTimerElement) {
                overallTimerElement.style.display = 'block';
            }
            
            totalRemainingTime = totalSeconds;

            const updateDisplay = () => {
                const minutes = Math.floor(totalRemainingTime / 60);
                const seconds = totalRemainingTime % 60;
                
                const overallTimerDisplayElement = document.getElementById('overallTimerDisplay');
                if (overallTimerDisplayElement) {
                    overallTimerDisplayElement.textContent =
                        `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                }
            };

            updateDisplay(); // 立即显示初始时间

            // 启动总体倒计时
            if (overallTimer) {
                clearInterval(overallTimer);
            }
            overallTimer = setInterval(() => {
                totalRemainingTime--;
                updateDisplay();
                
                // 检查是否需要隐藏计时器
                if (totalRemainingTime <= 0) {
                    clearInterval(overallTimer);
                    const timerElement = document.getElementById('overallTimer');
                    if (timerElement) {
                        timerElement.style.display = 'none';
                    }
                }
            }, 1000);
        }

        function updateOverallTimer(stepIndex) {
            // 根据当前步骤更新剩余时间
            totalRemainingTime = 0;
            for (let i = stepIndex + 1; i < 7; i++) {
                if (i === 2 || i === 3 || i === 4) {
                    totalRemainingTime += 12; // 关键步骤12秒
                } else {
                    totalRemainingTime += 8; // 默认8秒
                }
            }

            const minutes = Math.floor(totalRemainingTime / 60);
            const seconds = totalRemainingTime % 60;
            
            // 检查元素是否存在再设置textContent
            const overallTimerDisplayElement = document.getElementById('overallTimerDisplay');
            if (overallTimerDisplayElement) {
                overallTimerDisplayElement.textContent =
                    `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            }

            // 检查是否需要隐藏总体计时器
            const overallTimerElement = document.getElementById('overallTimer');
            if (totalRemainingTime <= 0 && overallTimerElement) {
                overallTimerElement.style.display = 'none';
            }
        }

        function startDivination() {
            const questionElement = document.getElementById('question');
            if (!questionElement) return;
            
            const question = questionElement.value.trim();
            if (!question) {
                alert('请先输入您要占问的事情');
                return;
            }

            // 检查元素是否存在再设置属性
            const startBtnElement = document.getElementById('startBtn');
            const progressIndicatorElement = document.getElementById('progressIndicator');
            const currentStepElement = document.getElementById('currentStep');
            
            if (startBtnElement) startBtnElement.disabled = true;
            if (progressIndicatorElement) progressIndicatorElement.style.display = 'block';
            if (currentStepElement) currentStepElement.style.display = 'block';

            // 计算总时间并开始总体倒计时
            const totalTime = calculateTotalTime();
            startOverallCountdown(totalTime);

            // 立即显示第一步的动画
            showStepAnimation(0);

            // 开始步骤流程
            currentStepIndex = 0;
            proceedWithSteps();
        }

        function startMeditation() {
            document.getElementById('meditationTimer').style.display = 'block';
            let seconds = 60;

            meditationTimer = setInterval(() => {
                seconds--;
                const minutes = Math.floor(seconds / 60);
                const remainingSeconds = seconds % 60;
                document.getElementById('timerDisplay').textContent =
                    `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;

                if (seconds <= 0) {
                    clearInterval(meditationTimer);
                    document.getElementById('meditationTimer').style.display = 'none';
                    proceedWithSteps();
                }
            }, 1000);
        }

        function proceedWithSteps() {
            currentStepIndex = 0;
            // 确保在DOM更新后再调用nextStep
            setTimeout(() => {
                nextStep();
            }, 0);
        }

        function nextStep() {
            if (currentStepIndex < steps.length) {
                updateProgress(currentStepIndex);
                
                // 检查元素是否存在再设置textContent
                const stepTitleElement = document.getElementById('stepTitle');
                const stepDescElement = document.getElementById('stepDesc');
                
                if (stepTitleElement) {
                    stepTitleElement.textContent = steps[currentStepIndex].title;
                }
                
                if (stepDescElement) {
                    stepDescElement.textContent = steps[currentStepIndex].desc;
                }

                // 更新总体倒计时
                updateOverallTimer(currentStepIndex);

                // 显示当前步骤的动画
                showStepAnimation(currentStepIndex);

                // 根据步骤设置不同的等待时间
                let waitTime = 8000; // 默认8秒
                if (currentStepIndex === 2 || currentStepIndex === 3 || currentStepIndex === 4) {
                    waitTime = 12000; // 关键步骤12秒
                }

                setTimeout(() => {
                    hideStepAnimation();
                    currentStepIndex++;
                    if (currentStepIndex < steps.length) {
                        nextStep();
                    } else {
                        performDivination();
                    }
                }, waitTime);
            }
        }

        function updateProgress(index) {
            for (let i = 1; i <= 7; i++) {
                const dot = document.getElementById(`dot${i}`);
                // 检查元素是否存在
                if (dot) {
                    if (i <= index + 1) {
                        dot.classList.add('active');
                    } else {
                        dot.classList.remove('active');
                    }
                }
            }
        }

        function showStepAnimation(stepIndex) {
            // 先清除之前的动画
            hideStepAnimation();

            const animationDiv = document.createElement('div');
            animationDiv.id = 'stepAnimation';

            const stepAnimations = [
                {
                    title: "第一步：备器与斋心",
                    subtitle: "准备竹签，静心凝神",
                    description: "准备50根同质竹签（或牙签、棉签），环境整洁安静；占卜前静心1-2分钟，摒除杂念，默念所要占问之事。"
                },
                {
                    title: "第二步：立太极",
                    subtitle: "抽出一根，象征太极",
                    description: "从50根中抽出1根横置案前，象征\"太极\"，余49根待用。"
                },
                {
                    title: "第三步：得上卦",
                    subtitle: "合于双手，举至额头",
                    description: "将49根合于双手，举至额头，屏息凝气，在\"间不容发\"之际果断分成左右两堆；男取左手堆，女取右手堆，对该堆\"除八取余\"（每8根一组取出，剩余数即为上卦数，若整除则作8）。"
                },
                {
                    title: "第四步：得下卦",
                    subtitle: "重新合拢，再次分堆",
                    description: "把刚才49根重新合拢，重复\"分堆—除八取余\"动作，但男取右手堆，女取左手堆，所得余数为下卦数。"
                },
                {
                    title: "第五步：取动爻",
                    subtitle: "第三次分堆取余",
                    description: "再次把49根合拢，分堆后男取左手堆、女取右手堆，对该堆\"除六取余\"（每6根一组取出，余数即为动爻位数，整除作6）。至此本卦与动爻俱定。"
                },
                {
                    title: "第六步：画卦与变卦",
                    subtitle: "绘制本卦和变卦",
                    description: "按\"先上后下\"写出本卦；从下往上数至动爻，阳爻变阴、阴爻变阳，得变卦。"
                },
                {
                    title: "第七步：查辞与解占",
                    subtitle: "综合解读卦象",
                    description: "翻开《高岛易断》或相关典籍：本卦卦辞权重约30%，动爻爻辞权重约51%，变卦卦辞权重约19%，结合三者断吉凶，并可配合当时占问背景灵活解读。"
                }
            ];

            const currentAnimation = stepAnimations[stepIndex];

            animationDiv.innerHTML = `
                <div class="meditation-overlay">
                    <div class="meditation-content">
                        <div class="breathing-circle"></div>
                        <div class="meditation-text">
                            <h3>${currentAnimation.title}</h3>
                            <p>${currentAnimation.subtitle}</p>
                            <p>${currentAnimation.description}</p>
                        </div>
                        <div class="countdown-timer" id="countdownTimer"></div>
                        <div class="dots-animation">
                            <span></span><span></span><span></span>
                        </div>
                    </div>
                </div>
            `;
            document.body.appendChild(animationDiv);

            // 根据步骤设置倒计时时间并启动
            let countdownTime = 8; // 默认8秒
            if (stepIndex === 2 || stepIndex === 3 || stepIndex === 4) {
                countdownTime = 12; // 关键步骤12秒
            }

            // 启动倒计时
            startCountdown(stepIndex, countdownTime);
        }

        function hideStepAnimation() {
            const animationDiv = document.getElementById('stepAnimation');
            if (animationDiv) {
                // 清除所有相关的定时器
                const timers = animationDiv.querySelectorAll('*');
                timers.forEach(element => {
                    if (element.id && element.id.includes('countdown')) {
                        const intervalId = element.getAttribute('data-interval-id');
                        if (intervalId) {
                            clearInterval(parseInt(intervalId));
                        }
                    }
                });
                
                animationDiv.remove();
            }
        }

        function startCountdown(stepIndex, initialTime) {
            let countdownTime = initialTime;
            
            // 使用setTimeout确保DOM已经更新
            setTimeout(() => {
                const countdownElement = document.getElementById('countdownTimer');
                if (!countdownElement) return;

                // 立即显示初始时间
                countdownElement.textContent = countdownTime;

                const countdownInterval = setInterval(() => {
                    countdownTime--;
                    // 再次检查元素是否存在
                    const element = document.getElementById('countdownTimer');
                    if (element) {
                        element.textContent = countdownTime;
                    }

                    if (countdownTime <= 0) {
                        clearInterval(countdownInterval);
                    }
                }, 1000);
            }, 0);
        }

        function performDivination() {
            const genderElement = document.querySelector('input[name="gender"]:checked');
            const gender = genderElement ? genderElement.value : 'male'; // 默认为男性
            
            // 如果没有选中任何选项，自动选中男性选项
            if (!genderElement) {
                const maleRadio = document.getElementById('male');
                if (maleRadio) {
                    maleRadio.checked = true;
                }
            }

            // 按照高岛易断标准流程进行占卜
            // 第三步：得上卦
            const pile1 = simulateDivision(); // 模拟分堆
            let upperTrigramNum;
            if (gender === 'male') {
                // 男取左手堆
                upperTrigramNum = (pile1.left % 8) || 8; // 余数为0时取8
            } else {
                // 女取右手堆
                upperTrigramNum = (pile1.right % 8) || 8; // 余数为0时取8
            }
            
            // 第四步：得下卦
            const pile2 = simulateDivision(); // 重新分堆
            let lowerTrigramNum;
            if (gender === 'male') {
                // 男取右手堆（与上卦相反）
                lowerTrigramNum = (pile2.right % 8) || 8; // 余数为0时取8
            } else {
                // 女取左手堆（与上卦相反）
                lowerTrigramNum = (pile2.left % 8) || 8; // 余数为0时取8
            }

            // 第五步：取动爻
            const pile3 = simulateDivision(); // 第三次分堆
            let changingLineNum;
            if (gender === 'male') {
                // 男取左手堆
                changingLineNum = (pile3.left % 6) || 6; // 余数为0时取6
            } else {
                // 女取右手堆
                changingLineNum = (pile3.right % 6) || 6; // 余数为0时取6
            }

            results = {
                upperTrigram: upperTrigramNum,
                lowerTrigram: lowerTrigramNum,
                changingLine: changingLineNum,
                gender
            };
            
            // 占卜完成后显示结果
            displayResults();
        }

        // 模拟分堆过程
        function simulateDivision() {
            // 模拟49根竹签的随机分堆
            const total = 49;
            const leftPile = Math.floor(Math.random() * (total - 2)) + 1; // 至少1根，最多47根
            const rightPile = total - leftPile;

            return {
                left: leftPile,
                right: rightPile
            };
        }

        function displayResults() {
            const { upperTrigram, lowerTrigram, changingLine } = results;

            // 构建本卦
            const upperBinary = trigrams[upperTrigram].binary;
            const lowerBinary = trigrams[lowerTrigram].binary;
            const originalBinary = upperBinary + lowerBinary;

            // 构建变卦
            let changedBinary = originalBinary.split('');
            const lineIndex = 6 - changingLine; // 从下往上数
            changedBinary[lineIndex] = changedBinary[lineIndex] === '1' ? '0' : '1';
            changedBinary = changedBinary.join('');

            // 显示卦象
            displayHexagram('originalHexagram', originalBinary, changingLine);
            displayHexagram('changedHexagram', changedBinary);

            // 显示卦名
            const originalName = getHexagramName(originalBinary);
            const changedName = getHexagramName(changedBinary);

            const originalNameElement = document.getElementById('originalName');
            const changedNameElement = document.getElementById('changedName');
            
            if (originalNameElement) {
                originalNameElement.textContent = `${originalName}`;
            }
            
            if (changedNameElement) {
                changedNameElement.textContent = `${changedName}`;
            }

            // 显示解读
            displayInterpretation(originalBinary, changedBinary, changingLine);

            const resultsElement = document.getElementById('results');
            const currentStepElement = document.getElementById('currentStep');
            
            if (resultsElement) {
                resultsElement.style.display = 'block';
            }
            
            // 显示截图按钮
            const screenshotBtn = document.getElementById('screenshotBtn');
            if (screenshotBtn) {
                screenshotBtn.style.display = 'inline-block';
            }
            
            if (currentStepElement) {
                currentStepElement.innerHTML = '<div class="step-title">占卜完成</div><div class="step-desc">请查看右侧卦象结果和详细解读。</div>';
            }

            const startBtnElement = document.getElementById('startBtn');
            if (startBtnElement) {
                startBtnElement.disabled = false;
                startBtnElement.textContent = '重新占卜';
                startBtnElement.onclick = resetDivination;
            }
        }

        function displayHexagram(containerId, binary, changingLine = null) {
            const container = document.getElementById(containerId);
            container.innerHTML = '';

            for (let i = 0; i < 6; i++) {
                const line = document.createElement('div');
                line.className = 'line';

                if (binary[i] === '0') {
                    line.classList.add('broken');
                }

                if (changingLine && (6 - i) === changingLine) {
                    line.classList.add('changing');
                }

                container.appendChild(line);
            }
        }

        function getHexagramName(binary) {
            if (hexagrams[binary]) {
                return hexagrams[binary].name;
            }
            // 简化处理，返回上下卦名组合
            // 创建二进制到八卦的映射
            const binaryToTrigram = {
                '111': '乾', '110': '兑', '101': '离', '100': '震',
                '011': '巽', '010': '坎', '001': '艮', '000': '坤'
            };
            
            const upperBinary = binary.substr(0, 3);
            const lowerBinary = binary.substr(3, 3);
            const upper = binaryToTrigram[upperBinary] || '乾';
            const lower = binaryToTrigram[lowerBinary] || '坤';
            return upper + lower;
        }

        function displayInterpretation(originalBinary, changedBinary, changingLine) {
            // 显示卦象基本信息
            const originalName = getHexagramName(originalBinary);
            const changedName = getHexagramName(changedBinary);
            const questionElement = document.getElementById('question');
            const question = questionElement ? questionElement.value : '';
            
            // 生成AI询问指导
            const aiGuide = generateAIGuide(originalName, changedName, changingLine, question);
            
            const originalTextElement = document.getElementById('originalText');
            const changingLineTextElement = document.getElementById('changingLineText');
            const changedTextElement = document.getElementById('changedText');
            const overallInterpretationElement = document.getElementById('overallInterpretation');
            
            if (originalTextElement) {
                originalTextElement.innerHTML = `<strong>本卦：${originalName}</strong>`;
            }
            
            if (changingLineTextElement) {
                changingLineTextElement.innerHTML = `<strong>动爻：第${changingLine}爻</strong>`;
            }
            
            if (changedTextElement) {
                changedTextElement.innerHTML = `<strong>变卦：${changedName}</strong>`;
            }
            
            if (overallInterpretationElement) {
                overallInterpretationElement.innerHTML = aiGuide;
            }
        }

        function getLineText(hexagramBinary, linePosition) {
            // 根据卦象和爻位获取爻辞
            // 这里简化处理，使用通用爻辞
            const generalLineTexts = {
                1: '初爻：事情刚刚开始，需要谨慎行事，打好基础。',
                2: '二爻：处于中下位置，宜守正待时，不宜冒进。',
                3: '三爻：位置不正，多有困难，需要格外小心。',
                4: '四爻：接近上位，机会来临，但仍需谨慎把握。',
                5: '五爻：居于尊位，正当其时，可以大展宏图。',
                6: '六爻：位至极高，物极必反，宜知进退。'
            };

            // 如果有具体的卦象爻辞，优先使用
            const hexagramName = getHexagramName(hexagramBinary);
            if (lineTexts[hexagramName] && lineTexts[hexagramName][linePosition - 1]) {
                return lineTexts[hexagramName][linePosition - 1];
            }

            // 否则使用通用爻辞
            return generalLineTexts[linePosition] || '此爻变化，需要灵活应对。';
        }

        function generateAIGuide(originalName, changedName, changingLine, question) {
            const aiPlatforms = [
                { name: 'ChatGPT', url: 'https://chat.openai.com' },
                { name: 'Claude', url: 'https://claude.ai' },
                { name: '文心一言', url: 'https://yiyan.baidu.com' },
                { name: '通义千问', url: 'https://tongyi.aliyun.com' },
                { name: 'Kimi', url: 'https://kimi.moonshot.cn' }
            ];
            
            const promptTemplate = `我刚刚用高岛易断法进行了占卜，想请您帮我解读卦象：

【占问事项】${question}

【卦象结果】
• 本卦：${originalName}
• 动爻：第${changingLine}爻
• 变卦：${changedName}

【解读权重说明】
根据《高岛易断》传统方法：
• 本卦卦辞权重约30%
• 动爻爻辞权重约51%
• 变卦卦辞权重约19%

请您从以下几个方面为我详细解读：
1. 本卦的基本含义和象征
2. 第${changingLine}爻的具体含义
3. 变卦所示的发展趋势
4. 针对我的问题给出具体建议
5. 需要注意的事项和时机把握

谢谢！`;
             
             // 保存到全局变量
             currentPromptTemplate = promptTemplate;
            
            let guide = `
                <div style="background: rgba(255, 215, 0, 0.1); padding: 20px; border-radius: 10px; border: 1px solid rgba(255, 215, 0, 0.3); margin-top: 15px;">
                    <h3 style="color: #ffd700; margin-bottom: 15px; text-align: center;">📱 AI解读指南</h3>
                    
                    <div style="background: rgba(255, 255, 255, 0.05); padding: 15px; border-radius: 8px; margin-bottom: 15px;">
                        <h4 style="color: #ffd700; margin-bottom: 10px;">🎯 第一步：可选择截图卦象</h4>
                        <p style="color: #cccccc; line-height: 1.6;">请对当前页面的卦象部分进行截图，保存到手机或电脑中，以便向AI展示完整的卦象信息。</p>
                    </div>
                    
                    <div style="background: rgba(255, 255, 255, 0.05); padding: 15px; border-radius: 8px; margin-bottom: 15px;">
                        <h4 style="color: #ffd700; margin-bottom: 10px;">🤖 第二步：选择AI平台</h4>
                        <p style="color: #cccccc; margin-bottom: 10px;">推荐使用以下AI平台进行解读：</p>
                        <div style="display: flex; flex-wrap: wrap; gap: 10px;">`;
            
            aiPlatforms.forEach(platform => {
                guide += `<a href="${platform.url}" target="_blank" style="background: rgba(255, 215, 0, 0.2); color: #ffd700; padding: 8px 12px; border-radius: 5px; text-decoration: none; border: 1px solid rgba(255, 215, 0, 0.3); transition: all 0.3s ease;" onmouseover="this.style.background='rgba(255, 215, 0, 0.3)'" onmouseout="this.style.background='rgba(255, 215, 0, 0.2)'">${platform.name}</a>`;
            });
            
            guide += `
                        </div>
                    </div>
                    
                    <div style="background: rgba(255, 255, 255, 0.05); padding: 15px; border-radius: 8px; margin-bottom: 15px;">
                        <h4 style="color: #ffd700; margin-bottom: 10px;">💬 第三步：复制提问模板</h4>
                        <p style="color: #cccccc; margin-bottom: 10px;">点击下方按钮复制提问模板，然后粘贴到AI对话框中：</p>
                        <button onclick="copyPromptToClipboard()" style="background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%); color: #1a1a2e; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: bold; transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">📋 复制提问模板</button>
                    </div>
                    
                    <div style="background: rgba(255, 255, 255, 0.05); padding: 15px; border-radius: 8px;">
                        <h4 style="color: #ffd700; margin-bottom: 10px;">📤 第四步：发送询问</h4>
                        <p style="color: #cccccc; line-height: 1.6;">将截图和提问模板一起发送给AI，它会为您提供详细的卦象解读和人生建议。</p>
                    </div>
                    
                    <div style="margin-top: 15px; padding: 10px; background: rgba(255, 215, 0, 0.05); border-radius: 5px; border-left: 3px solid #ffd700;">
                        <p style="color: #ffd700; font-size: 0.9em; font-style: italic;">💡 小贴士：不同的AI可能会给出不同角度的解读，您可以多问几个AI来获得更全面的理解。</p>
                    </div>
                </div>
                

            `;
            
            return guide;
        }

        // 全局变量存储当前的提问模板
        let currentPromptTemplate = '';
        
        function copyPromptToClipboard() {
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(currentPromptTemplate).then(() => {
                    alert('✅ 提问模板已复制到剪贴板！\n\n请打开AI平台，粘贴模板并上传卦象截图。');
                }).catch(err => {
                    console.error('复制失败:', err);
                    fallbackCopy(currentPromptTemplate);
                });
            } else {
                fallbackCopy(currentPromptTemplate);
            }
        }
        
        function fallbackCopy(text) {
            const textArea = document.createElement('textarea');
            textArea.value = text;
            textArea.style.position = 'fixed';
            textArea.style.left = '-999999px';
            textArea.style.top = '-999999px';
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            
            try {
                document.execCommand('copy');
                alert('✅ 提问模板已复制到剪贴板！\n\n请打开AI平台，粘贴模板并上传卦象截图。');
            } catch (err) {
                console.error('复制失败:', err);
                // 显示文本让用户手动复制
                const modal = document.createElement('div');
                modal.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 10000; display: flex; align-items: center; justify-content: center;';
                modal.innerHTML = `
                    <div style="background: #1a1a2e; padding: 20px; border-radius: 10px; max-width: 80%; max-height: 80%; overflow-y: auto; border: 1px solid #ffd700;">
                        <h3 style="color: #ffd700; margin-bottom: 15px;">请手动复制以下内容：</h3>
                        <textarea readonly style="width: 100%; height: 300px; background: rgba(255,255,255,0.1); color: #f4f4f4; border: 1px solid rgba(255,255,255,0.2); border-radius: 5px; padding: 10px; font-family: monospace;">${text}</textarea>
                        <button onclick="this.parentElement.parentElement.remove()" style="margin-top: 10px; background: #ffd700; color: #1a1a2e; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: bold;">关闭</button>
                    </div>
                `;
                document.body.appendChild(modal);
            }
            
            document.body.removeChild(textArea);
        }

        function resetDivination() {
            // 检查元素是否存在再设置style.display
            const resultsElement = document.getElementById('results');
            const progressIndicatorElement = document.getElementById('progressIndicator');
            const currentStepElement = document.getElementById('currentStep');
            const overallTimerElement = document.getElementById('overallTimer');
            const meditationTimerElement = document.getElementById('meditationTimer');
            
            if (resultsElement) resultsElement.style.display = 'none';
            if (progressIndicatorElement) progressIndicatorElement.style.display = 'none';
            if (currentStepElement) currentStepElement.style.display = 'none';
            if (overallTimerElement) overallTimerElement.style.display = 'none';

            // 清除总体倒计时
            if (overallTimer) {
                clearInterval(overallTimer);
                overallTimer = null;
            }
            if (meditationTimerElement) meditationTimerElement.style.display = 'none';

            if (meditationTimer) {
                clearInterval(meditationTimer);
                meditationTimer = null;
            }

            // 清除步骤动画
            hideStepAnimation();

            currentStepIndex = 0;
            results = {};
            totalRemainingTime = 0;

            // 检查元素是否存在再设置属性
            const startBtnElement = document.getElementById('startBtn');
            if (startBtnElement) {
                startBtnElement.textContent = '开始占卜';
                startBtnElement.onclick = startDivination;
                startBtnElement.disabled = false;
            }

            // 重置进度指示器
            for (let i = 1; i <= 7; i++) {
                const dotElement = document.getElementById(`dot${i}`);
                if (dotElement) {
                    dotElement.classList.remove('active');
                }
            }
            
            // 隐藏截图按钮
            const screenshotBtn = document.getElementById('screenshotBtn');
            if (screenshotBtn) {
                screenshotBtn.style.display = 'none';
            }
        }

        // 截图功能实现
        function takeScreenshot() {
            const hexagramDisplay = document.querySelector('.hexagram-display');
            if (!hexagramDisplay) {
                alert('未找到卦象显示区域');
                return;
            }

            // 使用html2canvas库进行截图
            if (typeof html2canvas === 'undefined') {
                // 如果html2canvas库未加载，使用简单的方法
                alert('正在准备截图功能，请稍后再试...');
                
                // 动态加载html2canvas库
                const script = document.createElement('script');
                script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js';
                script.onload = function() {
                    performScreenshot(hexagramDisplay);
                };
                document.head.appendChild(script);
            } else {
                performScreenshot(hexagramDisplay);
            }
        }

        function performScreenshot(element) {
            html2canvas(element, {
                backgroundColor: '#1a1a2e',
                scale: 2,
                useCORS: true,
                allowTaint: true
            }).then(function(canvas) {
                // 创建下载链接
                const link = document.createElement('a');
                link.download = `卦象结果_${new Date().toLocaleString().replace(/[/:]/g, '-')}.png`;
                link.href = canvas.toDataURL('image/png');
                
                // 触发下载
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                
                // 显示成功提示
                showToast('截图已保存到下载文件夹');
            }).catch(function(error) {
                console.error('截图失败:', error);
                alert('截图失败，请重试');
            });
        }

        // 显示提示信息
        function showToast(message) {
            const toast = document.createElement('div');
            toast.textContent = message;
            toast.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                background: #4CAF50;
                color: white;
                padding: 12px 20px;
                border-radius: 8px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
                z-index: 10000;
                font-size: 14px;
                font-weight: bold;
            `;
            
            document.body.appendChild(toast);
            
            // 3秒后自动移除
            setTimeout(() => {
                if (toast.parentNode) {
                    toast.parentNode.removeChild(toast);
                }
            }, 3000);
        }
        
        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 确保性别选择正常工作
            initializeGenderSelection();
        });
        
        function initializeGenderSelection() {
            // 确保默认选中男性
            const maleRadio = document.getElementById('male');
            if (maleRadio && !document.querySelector('input[name="gender"]:checked')) {
                maleRadio.checked = true;
                console.log('已自动选中男性选项');
            }
            
            // 添加性别选择的事件监听
            const genderRadios = document.querySelectorAll('input[name="gender"]');
            genderRadios.forEach(radio => {
                radio.addEventListener('change', function() {
                    console.log('性别选择已更改为:', this.value);
                });
            });
            
            // 检查当前选中状态
            const checkedGender = document.querySelector('input[name="gender"]:checked');
            console.log('当前选中的性别:', checkedGender ? checkedGender.value : '无');
        }
    </script>
</body>

</html>